<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>范闲商城-购物车</title>
	<link rel="stylesheet" href="/static/xiaomi/css/cart.css">
	<link rel="stylesheet" href="/static/xiaomi/font-awesome/css/font-awesome.min.css">
	<script type="text/javascript" src="../static/js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript" src="../static/js/jquery-ui.min.js"></script>
	<link rel="stylesheet" type="text/css" th:href="@{/static/css/reset.css}">
	<link rel="stylesheet" type="text/css" th:href="@{/static/css/main.css}">
	<link rel="stylesheet" th:href="@{/static/layui/css/layui.css}">
	<script th:src="@{/static/jquery-2.1.4.js}" type="text/javascript" charset="utf-8"></script>
	<script th:src="@{/static/layui/layui.js}" type="text/javascript" charset="utf-8"></script>
	<script th:src="@{/static/mylayer.js}" type="text/javascript" charset="utf-8"></script>

	<style>
		.avatar-img {
			width: 20px; /* 设置头像图片的宽度 */
			height: 20px; /* 设置头像图片的高度，可以根据需要调整 */
			border-radius: 50%; /* 使图片呈现圆形 */
			margin-right: 10px; /* 设置头像图片与用户名之间的间距，可以根据需要调整 */
		}
	</style>
</head>
<body>
<!--	<div class="header_con">-->
<!--		<div class="header">-->
<!--			<div class="welcome fl">欢迎来到范闲商城!</div>-->
<!--			<div class="fr" id="IFLogin">-->


<!--			</div>-->
<!--		</div>-->
<!--	</div>-->

	<div th:replace="header::top"></div>

	<div class="search_bar clearfix">
		<a href="/" class="logo fl"><img src="../static/pic/fanxian-mall.png" width="150px" height="60px"></a>
		<div class="sub_page_name fl">|&nbsp;&nbsp;&nbsp;&nbsp;购物车</div>
		<div class="search_con fr">
			<input type="text" id="searchInput" class="input_text fl" placeholder="搜索商品">
			<input type="button" id="searchButton" class="input_btn fr" value="搜索">
		</div>
	</div>
	<div class="navbar_con">
		<div class="navbar clearfix">
			<div class="subnav_con fl">
				<h1>全部商品分类</h1>
				<span></span>
				<ul class="subnav" id="LAY_CategoryList">
				</ul>
			</div>
			<ul class="navlist fl">
				<li><a href="/">首页</a></li>
				<li class="interval">|</li>
				<li><a href="/page/list">全部商品</a></li>
				<li class="interval">|</li>
				<li><a href="/page/turntable">抽奖</a></li>
			</ul>
		</div>
	</div>

	<!-- 购物车躯干部分 -->
	<div class="trunk">
		<!--购物车-->
		<div id="cartListALL" class="cart">
			<div class="list list-title" id="LAY_CartList">
				<div class="select select-all"><i class="fa fa-check" id="check-all"></i>全选</div>
				<div class="good-img"></div>
				<div class="good-name" style="font-size:14px; ">商品名称</div>
				<div class="good-price">单价</div>
				<div class="good-num">数量</div>
				<div class="good-total-price"style="color:#424242;">小计</div>
				<div class="operation">操作</div>
			</div>
			<div class="list list-total">
				<div class="list-total-left">
					<span class="notice"><a href="/page/list">继续购物</a></span>
					<span class="statistics">共 <span class="all-count">0</span> 件商品，已选择 <span class="select-count">0</span> 件</span>
				</div>
				<div class="list-total-right">
					<div class="total-price">合计: <span class="sum-price">0</span> 元</div>
					<button class="submit-cart" id="submit-cart">去结算</button>
				</div>
			</div>
		</div>
	</div>

	<div class="footer">
		<div class="foot_link">
			<a href="#">关于我们</a>
			<span>|</span>
			<a href="#">联系我们</a>
			<span>|</span>
			<a href="#">招聘人才</a>
			<span>|</span>
			<a href="#">友情链接</a>
		</div>
		<p>CopyRight © 2024 北京鑫鑫科技有限公司 All Rights Reserved</p>
		<p>电话：010-8888888    京ICP备88888888号</p>
	</div>
	<script src="/static/xiaomi/js/cart.js"></script>
	<script type="text/javascript">
		$('#searchButton').click(function() {
			var searchText = $('#searchInput').val(); // 获取搜索框中的值
			var searchUrl = '/page/list?search=' + encodeURIComponent(searchText); // 构建带有搜索关键字的URL
			window.location.href = searchUrl; // 跳转到另一个页面
		});
		/*$.post(
				'/cart/cartListSelectById',
				function (result) {
					if (result.code == 0) {
						var html = '';
						$(result.data).each(function () {
							html += '<div id="'+this.id+'" class="list list-item">'
							if (this.checked == 1) {
								html += '	<div class="select"><i class="fa fa-check checked"></i></div>'
							} else {
								html += '	<div class="select"><i class="fa fa-check"></i></div>'
							}
							html += '	<div class="good-img"><img src="/pic/'+this.productImage+'" alt=""></div>'
							html += '	<div class="good-name">'+this.productName+'</div>'
							html += '	<div class="good-price">'+this.price+'元</div>'
							html += '	<div class="good-num">'
							html += '		<div class="num-input">'
							html += '			<button class="minus">-</button>'
							html += '			<input type="text" value="'+this.quantity+'" class="num-value">'
							html += '				<button class="plus">+</button>'
							html += '		</div>'
							html += '	</div>'
							html += '	<div class="good-total-price">'+(this.quantity*this.price)+'元</div>'
							html += '	<div class="operation"><i class="fa fa-times"></i></div>'
							html += '</div>'
						});
						$('#LAY_CartList').after(html);
					}
				},
				'json'
		);*/
		$('#submit-cart').click(function () {
			//加入购物车之前首先判断有没有登录
			//如果没有登录首先完成登录
			//如果已经登录，就将商品信息插入到cart购物车表里面，然后跳转到购物车列表界面
			$.post(
					'/cart/checkedAll',
					function (result) {
						if (result.code == 0) {
							//代表已经登录，直接进入购物车
							if (result.data !== 0) {
								$.post(
										'/product/checkedStock',
										function (result) {
											if (result.code == 0) {
												location.href = '/page/place/order';
											} else {
												mylayer.errorMsg(result.msg);
											}
										},
										'json'
								);
							} else {
								//没有登录，弹出登录界面
								mylayer.errorMsg("请选择要下单的商品")
							}

						}
					},
					'json'
			);
		});

		$.post(
				'/category/listAll',
				function (result) {
					if (result.code == 0) {
						$('#LAY_CategoryList').empty();
						$(result.data).each(function () {
							$('#LAY_CategoryList').append('<li><a href="/page/list?parentId=' + this.id + '">'+this.name+'</a></li>');
						})
					}
				},
				'json'
		);
		function logout() {
			layer.confirm(
					'您确认要退出么',
					{icon:3},
					function() {
						$.post(
								'/user/logout',
								function (result) {
									if (result.code == 0) {
										mylayer.okMsg(result.msg);
										setTimeout(function() {
											window.location.reload();
										}, 800);
									}
								},
								'json'
						);
						// location.href = '/admin?method=logout'
					}
			);
		}
	</script>
</body>
</html>